<template>
	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
	
  <view class="order-container">
    <!-- 订单列表 -->
     <QiangdanList :list="orders"/>
  </view>
</template>

<script setup>
	import { useFontSizeStore } from '@/stores/fontSizeStore';
	
	const fontSizeStore = useFontSizeStore();
	import {volunteer_grabOrderApi} from "@/api/volunteer"
	// import { onLoad } from '@dcloudio/uni-app'; 
	import QiangdanList from "@/components/qiangdan-list/index"
	
import { ref,onMounted } from 'vue';

// 订单数据
const orders = ref([
]);

// 抢单处理
const handleGrab = (orderId) => {
  uni.showToast({
    title: `已抢单 #${orderId}`,
    icon: 'success',
    duration: 2000
  });
};

onMounted(()=>{
	volunteer_grabOrderApi().then((res)=>{
		if(res.code==200){
			orders.value=res.data;
		}
	})
})
</script>

<style scoped lang="less">
.order-container {
  padding: 12px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

// .order-item {
//   background-color: #fff;
//   border-radius: 8px;
//   padding: 15px;
//   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
// } 
.order-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  .item-left{
    flex:  0 0 100rpx;
    margin-right: 20rpx;
.product-image {
  width: 130rpx;
  height: 130rpx;
  border-radius: 8rpx;
  overflow: hidden;
  background-color: #f5f5f5;
  flex-shrink: 0;
}

.product-image image {
  width: 100%;
  height: 100%;
}
  }
  .item-right{
    flex:1;
  }
} 

/* 第一行：标题 */
.order-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12rpx;
}

/* 第二行：地址 */
.order-address {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

/* 第三行：联系人 */
.order-contact {
  font-size: 14px;
  color: #666;
  padding-bottom: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.phone {
  color: #007aff;
  margin-left: 5px;
}

.border-bottom {
  border-bottom: 1px solid #eee;
}

/* 第四行：服务时间和按钮 */
.order-footer {
  display: flex;
    justify-content: space-between;
  // align-items: center;
}

.service-time {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 6px;
  vertical-align: middle;
}

.grab-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 4px;
  padding: 6px 15px;
  font-size: 14px;
  height: auto;
  line-height: normal;
  margin:0!important;
}

.grab-btn:active {
  background-color: #0066cc;
}
</style>
